<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>上传文件信息</title>
    <style type="text/css">
        table tr td {
            border-top: 1px solid #bbbbbb;
        }
    </style>
    <script>
        function display(id) {
            document.getElementById("file").style.display = "none";
            document.getElementById("order").style.display = "none";
            document.getElementById("status").style.display = "none";

            document.getElementById(id).style.display = "block";
        }
    </script>
</head>
<body>
<div style="text-align: center">
    <table style="min-width: 500px;max-width: 500px;margin: 0 auto">
        <tr>
            <td>
                <p onclick="display('file')">上传文件信息</p>
            </td>
            <td>
                <p onclick="display('order')">订单信息</p>
            </td>
            <td>
                <p onclick="display('status')">打印机信息</p>
            </td>
            <td>
                <h3><a th:href="@{/logout}">退出</a></h3>
            </td>
        </tr>
    </table>
</div>
<div style="text-align: center">
    <table id="file"
           style="margin:0 auto;min-width: 900px;max-width:1200px;background-color:  rgb(237, 240, 242);display:block">
        <tr>
            <th>编号</th>
            <th>文件名</th>
            <th>文件所在位置</th>
            <th>上传时间</th>
        </tr>
        <tr th:each="file:${files}">
            <td th:text="${file.getId()}"></td>
            <td th:text="${file.getFileName()}"></td>
            <td th:text="${file.getFileLie()}"></td>
            <td th:text="${#dates.format(file.getDatetime())}"></td>
        </tr>
    </table>

    <table id="order"
           style="margin:0 auto;min-width: 900px;max-width:900px;background-color:  rgb(237, 240, 242);display:none;">
        <tr>
            <th>数据库订单编号</th>
            <th>打印文件编号</th>
            <th>支付宝订单编号</th>
            <th>支付宝交易号</th>
            <th>交易金额(元)</th>
            <th>交易状态</th>
            <th>交易时间</th>
        </tr>
        <tr th:each="order:${orders}">
            <td th:text="${order.getId()}"></td>
            <td th:text="${order.getFileId()}"></td>
            <td th:text="${order.getOrderNo()}"></td>
            <td th:text="${order.getTradeNo()}"></td>
            <td th:text="${order.getMoney()}"></td>
            <td th:text="${(order.getStatus()==0?'未支付':'已支付')}"></td>
            <td th:text="${#dates.format(order.getDatetime())}"></td>
        </tr>
    </table>
    <form th:action="@{/addPageOrInk}" method="get">
        <table id="status"
               style="margin:0 auto;min-width: 900px;max-width:1200px;background-color:  rgb(237, 240, 242);display:none;">

            <tr>
                <td>打印机剩余纸张:</td>
                <td th:text="${page}"></td>
                <td><input type="number" name="page" th:value="${page}"></td>
                <td><label>设置范围在0-1000之间</label></td>
            </tr>
            <tr>
                <td>打印机剩余墨水:</td>
                <td th:text="${ink}"></td>
                <td><input type="number" name="ink" th:value="${ink}"></td>
                <td><label>设置范围在0-100之间</label></td>
            </tr>
            <tr>
                <td colspan="3"><input type="submit"></td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>